<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目案例——新闻信息管理</title>
    <link rel="stylesheet" href="../css/style.css" />
  </head>

  <body>
    <div id="app">
      <button class="btn" @click="add">{{btn}}</button>

      <form>
        <p>新闻编号：{{nextId}}</p>
        <p>
          <input placeholder="新闻标题" id="tit" v-model="title" /><span></span>
        </p>
        <p>
          <textarea
            placeholder="新闻内容"
            id="msg"
            v-model="newcontent"
          ></textarea
          ><span></span>
        </p>
        <button @click="save()">保存</button>
        <button @click="clear" id="btn21">关闭</button>
      </form>
      <form class="search">
        <input type="text" placeholder="查询关键字" v-model="searchmsg" />
        <button @click="search">搜索</button>
      </form>
      <table class="my-table">
        <thead>
          <tr>
            <th>id</th>
            <th>标题</th>
            <th>发布时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in news">
            <td>{{item.id}}</td>
            <td :title="item.content" id="a">{{item.title}}</td>
            <td>{{item.pubdate}}</td>
            <td>
              <a href="#" @click="update(item.id)">修改</a> |
              <a href="#" @click="del(index)">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>&nbsp;</th>
            <td colspan="3">总计：{{news.length}}条</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    //田嘉负责增加，马福龙负责删除和计数功能，王启航负责修改功能
    const app = Vue.createApp({
      data() {
        return {
          btn: "添加新闻",
          title: "",
          news: [
            {
              id: 1,
              title: "8月消费增速年内首次转正专家：下半年消费...",
              content:
                "对于社会消费品零售总额同比增速年内首次由负转正，专家认为，这证明经济的复苏势头仍在持续推进，下半年随着消费旺季的到来，消费需求或将进一步释放，消费增长将延续回升势头。",
              pubdate: "2021/09/08",
            },
            {
              id: 2,
              title: "狗不理王府井店被除名 网友：别说加盟店，...",
              content:
                "近日，老字号“狗不理包子”因一则《维权声明》引发舆论关注。自媒体博主@谷岳在微博发布“探访评分最差餐厅”视频，随后，王府井狗不理餐厅在微博发布“针对网络不实视频的严正声明”称，该视频所有恶语中伤言论均为不实信息，要求“谷岳”及“北京人不知道的北京事儿”立即停止侵权行为，在大于现有影响的范围内消除影响并在国内主流媒体公开道歉。餐厅已报警处理。",
              pubdate: "2021/09/09",
            },
            {
              id: 3,
              title:
                "腾讯回应“60岁老人凌晨三点打排位”：无法判断是否为“他人代过人脸”",
              content:
                "9月9日午间，@腾讯成长守护平台 微博发布公告就网传图片“60岁老人凌晨三点排位”一事作出回应，称经过近3天的筛查比对，最后成功锁定到1个游戏账号。从技术手段和实际验证结论来看，系统认为确系“本人”在进行游戏。至于现实中该账号是否属于“他人代过人脸”，我们无法判断，也没有相关权限在企业后台数据之外做进一步确认",
              pubdate: "2021/09/09",
            },
          ],
          nextId: 4,
          searchmsg: "",
          searchlist: [],
          beforesearchlist: [],
        };
      },
      methods: {
        del(index) {
          this.news.splice(index, 1);
          // this.nextId;
        },
        add() {
          if (
            this.title == "" ||
            this.title == undefined ||
            this.title == null
          ) {
            alert("新闻标题不能为空！！");
          } else if (
            this.newcontent == "" ||
            this.newcontent == undefined ||
            this.newcontent == null
          ) {
            alert("新闻内容不能为空！！");
          } else { 
            
            this.news.push({
              id: this.nextId++,
              title: this.title,
              content: this.newcontent,
              pubdate: new Date().toLocaleDateString(),
            });
            this.title = "";
            this.newcontent = "";
          }
        },
        update(id) {
          //filter过滤器 获取news数组中的值  根据id返回筛选数据
          var newslist = this.news.filter(function (item) {
            return item.id == id;
          });
          this.id = newslist[0].id;
          this.title = newslist[0].title;
          this.newcontent = newslist[0].content;
        },
        save() {
          //some() 方法用于检测数组中的元素是否满足指定条件
          //如果id匹配 将修改后的值保存并显示
          this.news.some((item) => {
            if (item.id == this.id) {
              item.content = this.newcontent;
              item.title = this.title;
            }
          });
          this.id = "";
          this.title = "";
          this.newcontent = "";
        },
        clear() {
          //点击关闭清空输入框
          // document.getElementById("tit").value="";
          // document.getElementById("msg").value="";
          this.title = "";
          this.newcontent = "";
        },
      },
      //计算属性只进行计算  不会更改原数组的值
      computed: {
        search() {
          const kewWords = this.searchmsg;
          let searchlist = this.news.filter(function (item) {
            // console.log('this.searchmsg --> ', kewWords)
            // console.log('return --> ' + (item.title.indexOf(kewWords) >= 0));
            //返回一个布尔值

            return item.title.indexOf(kewWords) >= 0;
          });
          //赋值
          this.news = searchlist;
        },
      },
    });
    app.mount("#app");
  </script>
</html>
